<template>
  <div>
    <NormalForm pageTitle="客户分群" :operateForm="queryForm" :formList="formList" :enumOpt="enumOpt"
      @handleQuery="handleQuery" @handleReset="handleReset"></NormalForm>
    <div style="padding: 0 20px 20px 20px" class="g-card">
      <div class="right-btn" style="margin-right: 0">
        <el-button type="primary" plain size="mini" @click="createClick">创建分群</el-button>
      </div>
      <el-table :data="tableList" :loading="loading" style="width: 100%" row-key="id"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" height="475"
        :header-cell-style="{ background: '#F8F8F8', color: '#1D1D1D', height: '40px', textAlign: 'center' }"
        :row-style="{ height: '40px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }">
        <el-table-column label="分群名称" prop="groupName" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="text"
              @click="$router.push({ name: 'ClientsDetails', query: { infoId: scope.row.infoId, groupName: scope.row.groupName, createTime: scope.row.createTime } })">{{
                scope.row.groupName
              }}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="peopleCount" label="人数" align="center"></el-table-column>
        <el-table-column prop="createType" label="创建方式" align="center"></el-table-column>
        <el-table-column prop="updateType" label="更新方式" align="center"></el-table-column>
        <el-table-column prop="createBy" label="创建者" align="center"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
        <el-table-column prop="date" label="操作" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="edit(scope.row)">编辑</el-button>
            <el-button size="mini" type="text" @click="del(scope.row)">删除</el-button>
            <el-button size="mini" type="text" :disabled="scope.row.updateType == '例行' || scope.row.updateType == 1"
              @click="update(scope.row)">更新</el-button>
            <el-button size="mini" type="text"
              @click="$router.push({ path: '/customerInsight/customerPortraitSelf', query: { infoId: scope.row.infoId } })">群画像</el-button>
          </template>
        </el-table-column>
      </el-table>
      <NormalPagination :currentPage="queryForm.pageNum" :pageSize="queryForm.pageSize" :total="total"
        @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></NormalPagination>
    </div>
    <!-- 删除确认弹窗-->
    <el-dialog title="删除确认" :visible.sync="confirmDeleteVisible" class="deleteDialog" width="436px">
      <span class="deleteInfo">确认删除该条分群规则？</span>
      <div slot="footer">
        <el-button @click="confirmDeleteVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleDeleteCustomer">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { queryCustomerSegList, deleteCustomerSegInfo, permission, caculation } from "@/api/swarm/index.js";

export default {
  name: "customerSwarm",
  data() {
    return {
      queryForm: {
        groupSearch: null,
        createBy: [],
        createType: null,
        nowCalState: null,
        runState: null,
        updateType: null,
        pageNum: 1,
        pageSize: 20,
      },
      formList: [
        {
          label: '分群名称',
          value: '',
          prop: 'groupSearch',
          type: 'INPUT',
          emunName: '',
        },
        {
          label: '运行状态',
          value: '',
          prop: 'runState',
          type: 'SELECT',
          emunName: 'labelStateList',
        },
        {
          label: '更新方式',
          value: '',
          prop: 'updateType',
          type: 'SELECT',
          emunName: 'updateTypeList',
        },
        {
          label: '最新计算状态',
          value: '',
          prop: 'nowCalState',
          type: 'SELECT',
          emunName: 'countStateList',
        },
        {
          label: '创建方式',
          value: '',
          prop: 'createType',
          type: 'SELECT',
          emunName: 'createTypeList',
        },
        {
          label: '创建者',
          value: [],
          prop: 'createBy',
          type: 'SELECT',
          emunName: 'creatorList',
          multiple: true
        },
      ],
      enumOpt: {
        labelStateList: [
          { dictLabel: "正常运行", dictValue: "0" },
          { dictLabel: "已暂停", dictValue: "1" },
        ],
        countStateList: [
          { dictLabel: '新创建', dictValue: '1' },
          { dictLabel: '等待计算', dictValue: '2' },
          { dictLabel: '计算失败', dictValue: '3' },
          { dictLabel: '计算成功', dictValue: '4' },
          { dictLabel: '计算中', dictValue: '5' },
          { dictLabel: '延迟计算', dictValue: '6' }
        ],
        updateTypeList: [
          { dictLabel: "例行", dictValue: "1" },
          { dictLabel: "手动", dictValue: "2" },
        ],
        createTypeList: [
          { dictLabel: "规则创建", dictValue: "0" },
          { dictLabel: "导入创建", dictValue: "1" },
        ],
        creatorList: []
      },
      loading: false,
      total: 0,
      tableList: [],
      //删除确认弹窗
      confirmDeleteVisible: false,
      delInfoId: '',
    };
  },
  created() {
    this.getCreatorList()
    this.handleQuery();
  },
  methods: {
    getCreatorList() {
      let obj = {
        name: "",
        deptId: null,
        authFlag: "Y",
      };
      permission(obj).then((res) => {
        if (res.code === 200 && res.data.length) {
          res.data.forEach((item) => {
            this.enumOpt.creatorList.push({
              dictLabel: item.userName,
              dictValue: item.userId,
            });
          });
        }
      });
    },
    createClick() {
      this.$router.push({ name: "Swarmedit" });
    },
    queryCustomerSegListFn() {
      this.loading = true
      let params = { ...this.queryForm }
      params.createBy = params.createBy || []
      queryCustomerSegList(params).then((res) => {
        if (res.code == 200) {
          this.tableList = res.data.runStateList || [];
          this.total = res.data.total || 0;
        }
        this.loading = false
      });
    },
    handleQuery() {
      this.queryForm.pageNum = 1
      this.queryCustomerSegListFn()
    },
    // 重置搜索问卷
    handleReset() {
      this.queryForm = {
        groupSearch: null,
        createBy: [],
        createType: null,
        nowCalState: null,
        runState: null,
        updateType: null,
        pageNum: 1,
        pageSize: 20,
      }
      this.queryCustomerSegListFn()
    },
    // 翻页
    handleSizeChange(val) {
      this.queryForm.pageNum = 1
      this.queryForm.pageSize = val
      this.queryCustomerSegListFn()
    },
    handleCurrentChange(val) {
      this.queryForm.pageNum = val
      this.queryCustomerSegListFn()
    },
    edit(val) {
      this.$router.push({
        name: "Swarmedit",
        query: { infoId: val.infoId },
      });
    },
    del(val) {
      this.delInfoId = val.infoId;
      this.confirmDeleteVisible = true;
    },
    update(val) {
      caculation({ infoId: val.infoId }).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.msg)
        }
      })
    },
    /** 删除弹窗操作 */
    handleDeleteCustomer() {
      deleteCustomerSegInfo({ infoId: this.delInfoId }).then((res) => {
        this.confirmDeleteVisible = false;
        this.queryCustomerSegListFn();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../../../styles/base.scss";

.g-card:first-child {
  margin-bottom: 8px;
}

::v-deep .g-pad20 {
  padding: 20px 0px 20px 20px;
}

::v-deep .el-table th.el-table__cell.is-leaf,
.el-table td.el-table__cell {
  border-bottom: none !important;
}

::v-deep .el-table .el-table__header-wrapper th {
  background-color: #f8f8f9 !important;
}

::v-deep.el-autocomplete {
  position: absolute;
  right: 10px;
}

.createbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;

  .createlabel:hover {
    border: 1px solid #082aff;
  }

  .createlabel {
    width: 48%;
    height: 70px;
    display: flex;
    justify-content: space-around;
    padding: 4px;
    box-shadow: 0 0 9.67px 0 rgba(0, 0, 0, 0.16);
    border: 1px solid white;
    margin-bottom: 10px;

    .createlabel-left {
      width: 20%;
      height: 100%;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .createlabel-right {
      width: 75%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }
}
</style>
